<template>
  <div>

    <el-dialog
        :title="'数据导入'"
        :visible.sync="dialogImportExcel"
        width="28%"
        :close-on-click-modal="false"
        custom-class="pub_dialog"
        :destroy-on-close="true"
    >
      <el-upload
          class="upload-demo"
          drag
          ref="upload"
          :on-success="handleAvatarSuccess"
          :limit="1"
          :on-exceed="handleExceed"
          :headers="authorToken"
          :auto-upload="false"
          :action="IMPORT_EXCEL_URL"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <el-button style="margin-left: 100px" @click="dialogImportExcel = false"
      >取 消
      </el-button
      >
      <el-button
          style="margin-bottom: 30px; margin-top: 20px"
          size="small"
          type="primary"
          @click="submitUpload"
      >上传到服务器
      </el-button>
    </el-dialog>
  </div>
</template>


<!--

使用示例

<el-button v-auth="['/kakou/userInfo/saveOrUpdate']" type="primary" @click="$refs['ImportUserInfo'].dialogImportExcel = true">导 入
      </el-button>
//界面
<ImprotExcel ref="ImportRoom" :IMPORT_EXCEL_URL="UPLOAD_URL_GELI_ROOM" @handleAvatarSuccess="handleImportSuccess"></ImprotExcel>

//js引入
import ImprotExcel from "@/components/Upload/ImprotExcel";





-->


<script>
export default {
  name: "ImprotExcel",
  props: {
    IMPORT_EXCEL_URL: String
  },
  data() {
    return {
      authorToken: {
        Authorization: "Bearer " + sessionStorage.getItem("token"),
      },
      dialogImportExcel:false,
      fileList:[]
    }
  },
  methods:{
    submitUpload() {
      console.log(this.$refs.upload)
      // if(this.fileList.length == 0){
      //   this.$message.error("请先上传文件");
      //   return false
      // }
      this.$refs.upload.submit();
    },
    //导入成功之后方法
    handleAvatarSuccess(response, file) {
      if (response.code === 200) {
        if (response.data) {
          this.dialogImportExcel = false;
          this.$emit("handleAvatarSuccess")
          this.$message.success("导入成功");
        } else {
          this.$message.error(file.name + "导入失败!请查看数据是否正确");
        }
      } else {
        this.$message.error(file.name + "导入失败!");
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
  }
}
</script>

<style scoped>
/deep/ .upload-demo .el-upload{
  width: 100%;
}
/deep/ .upload-demo .el-upload-dragger{
  width: 100%;
}
</style>